<template>
	<view class="commentItem">
		<view class="conCommentTop">
			<view class="conUserAvatar">
				<image :src="(data.User && data.User.avatarUrl) || '/static/imgs/smile.png'" mode="aspectFill">
				</image>
			</view>
			<view class="conText" @touchstart="propsFunction.touchStart(data)" @touchend="propsFunction.touchEnd">
				<view class="conTextTop">
					<view class="userName">{{ (data.User && data.User.username) || "神秘用户" }}</view>
					<view class="authorTag" v-if="data.UserId===authorId">作者</view>
					<view class="myTag" v-else-if="useUser.userInf.id==data.UserId">我</view>
					<view class="conTime">{{ timeInterval(data.date) }}</view>
				<!-- 	<view class="deleteIcon"
						v-if="useUser.userInf.id===data.UserId || useUser.userInf.role==='jyu_admin'"
						@click="deleteItem"><van-icon name="delete" color="#373737" /></view> -->
				</view>
				<view class="comment">{{ data.content }}</view>
			</view>
		</view>
		<view class="commentBth">
			<!-- <view class="conCommentBthRight">
				<view class="commentDislike">
					<van-icon name="good-job-o" size="20" color="#9a9a9a" />
					{{0}}
				</view>
				<view class="commentLike">
					<van-icon name="good-job-o" size="20" color="#9a9a9a" />
					{{0}}
				</view>
			</view> -->
			<view class="bthResponce" @click="reply">回复
			</view>
			<view class="showReply" v-if="replyNum&&!isShowReply" @click="showReply">
				{{`展开${replyNum}条回复`}}
				<van-icon name="arrow-down" />
			</view>
			<view class="showReply" v-else-if="isGetting&&!replies.length">
				<van-loading size="30rpx" type="spinner" color="#707070">加载中...</van-loading>
			</view>
			<view class="showReplyMask" v-else></view>
		</view>
		<view v-if="replyNum">
			<ChildrenComment :source="source" :isShow='isShowReply' v-for="source in replies" :key="source.id"
				:authorId='authorId' />
		</view>
		<view class="conBottomBth" v-if="isShowReply&&!isGetting">
			<view class="bthMoreReply" @click="replyPage.page = replyPage.page + 1"
				v-if="replyPage.page !== replyPage.totalPage">
				加载更多
				<van-icon name="arrow-down" />
			</view>
			<view class="bthUnShow" @click="showReply">
				收起
				<van-icon name="arrow-up" />
			</view>
		</view>
		<view class="conBottomBth" v-else-if="isGetting&&replies.length">
			<van-loading size="30rpx" type="spinner" color="#707070">加载中...</van-loading>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		inject,
	} from "vue";
	import ChildrenComment from "./ChildrenComment.vue";
	import {
		useUserStore,
		useCommentStore
	} from "@/store";

	const useUser = useUserStore()
	import timeInterval from "@/utils/timeInterval";
	const commentStore = useCommentStore();

	const props = defineProps({
		data: {
			type: Object
		},
		authorId: {
			type: Number
		}
	});
	const replyNum = ref()
	replyNum.value = props.data.totalReplies

	const reply = () => {
		commentStore.setTarget(
			props.data.User.username,
			props.data.postId,
			props.data.id
		);
		commentStore.handleInp(true);
	};
	const isShowReply = ref(false);
	const replies = ref([]);
	const replyPage = reactive({
		page: 1,
		pageSize: 5,
		totalPage: 1,
	});
	watch(
		() => replyPage.page,
		(newValue) => {
			if (newValue !== 1)
				getReply();
		}
	);
	const showReply = () => {
		isShowReply.value = !isShowReply.value;
		if (isShowReply.value && !replies.value.length) {
			getReply();
		}

	};
	//有回复行为就重新拿列表，还没想到更好的方案
	watch(
		() => commentStore.isActiveReply,
		() => {
			if (props.data.id == commentStore.currCommentId) {
				replies.value = []
				replyPage.page = 1
				getReply();
				isShowReply.value = true
				commentStore.setTarget('', props.data.postId, null)
			}
		}
	);
	watch(
		() => commentStore.isDeleteSonComment,
		() => {
			if (props.data.id == commentStore.currentParentId) {
				console.log('变化')
				replies.value = []
				replyPage.page = 1
				getReply()
			}
		}
	)
	const isGetting = ref(false)

	function getReply() {
		isGetting.value = true
		commentStore
			.getReply({
				parentId: props.data.id,
				page: replyPage.page,
				pageSize: replyPage.pageSize,
			})
			.then((res) => {
				isGetting.value = false
				console.log(res, 'res')
				if (res.status === 200) {
					const {
						comments,
						totalPage,
						currentPage,
						total
					} = res.data;
					replyPage.page = currentPage;
					replyPage.totalPage = totalPage;
					replies.value.push(...comments);
					replyNum.value = total
					if (total === 0)
						isShowReply.value = false
				} else {
					console.log("获取回复失败");
				}
			});
	}
	const propsFunction = inject('propsFunction')
</script>

<style lang="less" scoped>
	.commentItem {
		min-height: 120rpx;
		width: 90%;
		margin: 25rpx auto;
		display: flex;
		flex-direction: column;
		transition: all 0.1s;

		.conCommentTop {
			display: flex;
			min-height: 80rpx;
			width: 100%;

			.conUserAvatar {
				height: 80rpx;
				width: 80rpx;
				border-radius: 40rpx;
				overflow: hidden;
				margin-right: 10rpx;
				background-color: #e5e5e5;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.conText {
				min-height: 85rpx;
				flex: 1;
				margin-bottom: 5rpx;

				&:active {
					background-color: #e5e5e5;
				}

				.comment {
					min-height: 40rpx;
					line-height: 40rpx;
					color: #1d1d1d;
					font-weight: 550;

				}

				.myTag {
					// height: 30rpx;
					padding: 2rpx;
					line-height: 30rpx;
					color: #ffffff;
					font-size: 28rpx;
					background-color: #09e591;
					width: 30rpx;
					border-radius: 3rpx;
					margin-left: 20rpx;
					text-align: center;
				}

				.authorTag {
					height: 30rpx;
					line-height: 30rpx;
					color: #fff;
					font-size: 20rpx;
					background-color: rgba(1, 148, 232, .8);
					width: 60rpx;
					border-radius: 3rpx;
					margin-left: 30rpx;
					text-align: center;
				}

				.conTextTop {
					display: flex;
					width: 100%;
					font-weight: 550;
					align-items: center;

					.userName {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #737373;
						max-width: 50vw;
						font-weight: 550;
					}

					.conTime {
						min-height: 40rpx;
						font-size: 22rpx;
						color: #b2b2b2;
						line-height: 40rpx;
						margin-left: 25rpx;
					}
				}

			}
		}

		.commentBth {
			color: #707070;
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			width: 85%;
			margin-left: 15%;
			font-size: 28rpx;

			.conCommentBthRight {
				display: flex;
				width: 40%;
				height: 100%;
				justify-content: space-between;

				.commentLike,
				.commentDislike {
					margin: 0 20rpx;
					display: flex;
					align-items: center;
					height: 100%;

				}
			}

			.bthResponce {
				height: 100%;
				line-height: 60rpx;
			}

			.showReply,
			.showReplyMask {
				min-width: 35vw;
				height: 100%;
				line-height: 60rpx;
			}
		}

		.conBottomBth {
			width: 35vw;
			display: flex;
			justify-content: space-between;
			margin-left: 85rpx;
			font-size: 28rpx;
			color: #707070;

			.bthMoreReply {
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
			}

			.bthUnShow {
				height: 50rpx;
				display: flex;
				line-height: 50rpx;
			}
		}
	}
</style>